<template>
    <div>
        <rui-page :defines="defines">
            <br>
            <div>
                <rui-query :label-width="240"
                           ref="searchForm"
                           :query="queryData"
                           :query-rows="searchFormOptions"
                />
                <Row>
                    <Alert show-icon>
                        已选择 <span class="select-count">{{selectCount}}</span> 项
                        <a class="select-clear" @click="clearSelectAll">清空</a>
                    </Alert>
                </Row>
                <rui-table
                    :defineId="'defineTable'"
                    :fixedLeft="['action']"
                    :showIndex="false"
                    :select="true"
                    :columns="showColumns"
                    :slots="[{key:'action',slot:'action'},{key:'status',slot:'status'}]"
                    @loadDatas="queryData"
                    @on-selection-change="changeSelect"
                    ref-query="searchForm"
                    ref="showTable"
                >
                    <template slot="toolBar">
                        <Button @click="add" icon="md-add" type="primary">新增</Button>
                        <Button @click="effectiveAll" type="primary">有效</Button>
                    </template>
                    <template slot="action" slot-scope="{ row }">
                        <Button @click="edit(row)" size="small" type="primary">编辑</Button>
                        <Button type="error" size="small" @click="remove(row)">删除</Button>
                    </template>
                    <template slot-scope="{ row, index }" slot="status">
                        <div>
                            <tag v-if="row.status=='1'" color="success" size="default">有效</tag>
                            <tag v-if="row.status=='0'" color="error" size="default">无效</tag>
                        </div>
                    </template>
                </rui-table>
            </div>
        </rui-page>
        <Modal
            v-model="isShow"
            :title="'规则编辑页面'"
            :closable="false"
            :width="1300"
            :mask-closable="false"
        >
            <discountSourceRule @next="close()" ref="sourceRuleRefresh"/>
            <div slot="footer">
            </div>
        </Modal>

    </div>
</template>
<script>
    import tableDefine from "./define/discount-source-rule-define";
    import discountSourceRule from "./discountSourceRule";
    import {
        getSourceRuleInfoList,
        effectiveDiscountPlan,
        delById
    } from "@/projects/afs-core-business/api/afs-product/product/discountSourceRule";
    export default {
        components: {
            discountSourceRule
        },
        data() {
            return {
                atomModalVisible:false,
                isShow: false,
                modalType: 0,
                fitScope: '001',
                showColumns: ["action", "discountSourceName", "ruleExpression", "status"],
                searchFormOptions: [

                    {defineId: "defineTable", span: 8, fields: ["discountSourceName", "status"]},
                ],
                selectCount: 0,
            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "defineTable",
                        fields: tableDefine
                    }
                ];
            }
        },
        methods: {
            close() {
                this.isShow = !this.isShow;
                this.refresh();
            },
            queryData(queryData) {
                getSourceRuleInfoList(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.showTable.updateTableData(records, total);
                        this.clearSelectAll();
                    }
                });

            },
            refresh() {
                this.$refs['showTable'].reloadData();
                this.clearSelectAll();
            },
            clearSelectAll(){
                this.$refs.showTable.getTable().selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            effectiveAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认设置有效吗",
                    content: "您确认要设置有效所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = [];
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        effectiveDiscountPlan(ids).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.refresh();
                            }
                        });
                    }
                });
            },
            add() {
                this.isShow = !this.isShow;
                this.refresh();
                this.$refs.sourceRuleRefresh.sourceCom(null);
            },
            edit(row) {
                this.isShow = !this.isShow;
                this.refresh();
                this.$refs.sourceRuleRefresh.sourceCom(row);
            },
            remove(v) {
                delById(v.id).then(res => {
                    if (res.code === "0000") {
                        this.$Message.success(res.msg);
                        this.refresh();
                    }
                });
            },
        },
        mounted() {
            this.refresh();
        }
    };
</script>
